import React, { useEffect, useState } from "react";
import ReactMarkdown from "react-markdown";
import { Collapse, Layout, Popover, theme } from "antd";
import { CaretRightOutlined } from "@ant-design/icons";
import axios from "axios";
const { Content } = Layout;
const { Panel } = Collapse;

const App: React.FC = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();

  const { token } = theme.useToken();

  const panelStyle = {
    marginBottom: 24,
    background: token.colorFillAlter,
    borderRadius: token.borderRadiusLG,
    border: "none",
  };

  const content = <div>点击即可查看👀👀</div>;

  const handlePanelChange = (keys: string | string[]) => {
    if (typeof keys !== "string") {
      keys.map((key) => {
        switch (key) {
          case "1":
            getMarkdownContent("review.md").then((res) => {
              setMarkdownContentReview(res.data.data.content);
            });
            break;
          case "2":
            getMarkdownContent("method.md").then((res) => {
              setMarkdownContentMethod(res.data.data.content);
            });
            break;
          case "3":
            getMarkdownContent("plan.md").then((res) => {
              setMarkdownContentPlan(res.data.data.content);
            });
            break;
          default:
            break;
        }
      });
    }
  };
  const [markdownContentReview, setMarkdownContentReview] =
    useState<string>("");
  const [markdownContentMethod, setMarkdownContentMethod] =
    useState<string>("");
  const [markdownContentPlan, setMarkdownContentPlan] = useState<string>("");

  async function getMarkdownContent(filename: string) {
    let contentBack = await axios.get(`/api/md/${filename}`);
    return contentBack;
  }

  useEffect(() => {
  }, []);

  return (
    <div>
      <Content
        style={{
          margin: "24px 16px",
          padding: 24,
          minHeight: 280,
          background: colorBgContainer,
        }}
      >
        <Collapse
          size="large"
          defaultActiveKey={[""]}
          bordered={false}
          expandIcon={({ isActive }) => (
            <CaretRightOutlined rotate={isActive ? 90 : 0} />
          )}
          onChange={handlePanelChange}
        >
          <Panel
            header={
              <Popover content={content}>
                <span style={{ fontSize: "20px", userSelect: "none" }}>
                  👇 🐶 🐱 🐭 🐹 🐰 🦊 学 习 回 顾 🐻 🐼 🐻 🐨 🐯 🦁
                </span>
              </Popover>
            }
            key="1"
            style={panelStyle}
          >
            <ReactMarkdown>{markdownContentReview}</ReactMarkdown>
          </Panel>

          <Panel
            header={
              <Popover content={content}>
                <span style={{ fontSize: "20px", userSelect: "none" }}>
                  👇 🍏 🍎 🍐 🍊 🍋 🍌 学 习 方 法 🍉 🍇 🍓 🍈 🍒 🍑
                </span>
              </Popover>
            }
            key="2"
            style={panelStyle}
          >
            <ReactMarkdown>{markdownContentMethod}</ReactMarkdown>
          </Panel>
          <Panel
            header={
              <Popover content={content}>
                <span style={{ fontSize: "20px", userSelect: "none" }}>
                  👇 ❤️ 🧡 💛 💚 💙 💜 未 来 计 划 💞 💓 💗 💖 💘 💝
                </span>
              </Popover>
            }
            key="3"
            style={panelStyle}
          >
            <ReactMarkdown>{markdownContentPlan}</ReactMarkdown>
          </Panel>
        </Collapse>
      </Content>
    </div>
  );
};

export default App;
